<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #mm {
      width: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      right: 20px;
      top: 50px;
    }

    .mmBlock {
      width: 2px;
      height: 20px;
      background: blue;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
    }

    .mmItem {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      transition: 0.45s;
      margin-top: 10px;
      background: rgba(221, 17, 17, 0.5);
      position: relative;
      border: 1px solid white;
    }

    .mmItemTit {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translate(0, -50%);
      width: 190px;
      color: rgba(221, 17, 17, 1);
      /* border: 1px solid red; */
      text-align: right;
      text-shadow: 0 0 5px rgb(255, 255, 255);
      /* box-shadow: 0 0 10px rgb(255, 255, 255); */
      opacity: 0;
    }
  </style>
</head>

<body>
  <div id="mm" class="mmBox">
    <div class="mmBlock" id="mmBlock"></div>
    <div class="mmItem" style="margin-top: 0;">
      <div class="mmItemTit">
        首页
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        学院介绍
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        办学理念
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        办学定位
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        招生计划
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        学员就业榜
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        集团简介
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        政府认可 领导关注
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        新闻联播采访报道
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        学院荣誉
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        强大的背景支撑
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        强大的背景支撑
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        区位优势
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        优美的校园环境
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        先进的教学配套
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        师资力量雄厚
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        懂职业教育 更懂学历教育
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        职业技能等级认证
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        自主科研成果
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        校园文化生活
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        竞赛屡获殊荣
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        全方位就业保障
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        就业喜报
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        就业案例
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        专业—UI/UE设计运营
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        专业—全栈程序开发
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        专业—大数据人工智能
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        专业—JAVA分布式开发
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        专业—元宇宙虚拟现实
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        爱心助学计划
      </div>
    </div>
    <div class="mmItem">
      <div class="mmItemTit">
        校区地址
      </div>
    </div>
  </div>

  <script>
    var mm = document.getElementById('mm')
    var rect = mm.getBoundingClientRect()
    console.log('rect = ', rect)
    function check(bol) {
      let index = ''
      // 获取所有圆球的位置
      let circleArr = document.getElementsByClassName('mmItem')
      let titArr = document.getElementsByClassName('mmItemTit')
      for (let i = 0; i < circleArr.length; i++) {
        let rect = circleArr[i].getBoundingClientRect()
        let top = parseFloat(document.getElementById('mmBlock').style.top)
        if (top >= rect.top && top <= rect.bottom) {
          index = i
          if (bol) {
            for (let j = 0; j < circleArr.length; j++) {
              circleArr[j].style.background = 'rgba(221, 17, 17, 0.5)'
              circleArr[j].style.transform = 'scale(1)'
              titArr[j].style.opacity = 0
            }
            circleArr[i].style.background = 'rgba(221, 17, 17, 1)'
            circleArr[i].style.transform = 'scale(1.5)'
            titArr[i].style.opacity = 1
            if (circleArr[i - 1]) {
              // titArr[i - 1].style.opacity = 1;
              circleArr[i - 1].style.background = 'rgba(221, 17, 17, 0.8)'
              circleArr[i - 1].style.transform = 'scale(1.25)'
            }
            if (circleArr[i + 1]) {
              // titArr[i + 1].style.opacity = 1;
              circleArr[i + 1].style.background = 'rgba(221, 17, 17, 0.8)'
              circleArr[i + 1].style.transform = 'scale(1.25)'
            }
          }
        }
      }
      return index
    }
    mm.ontouchstart = function (event) {
      var y0 = event.touches[0].clientY
      if (y0 >= rect.height + rect.top) {
        return
      }
      if (y0 <= 0) {
        return
      }
      document.getElementById('mmBlock').style.top = y0 + 'px'
      console.log('当前下标1 = ', check())
    }
    mm.ontouchmove = function (event) {
      event.preventDefault()
      var x1 = event.touches[0].clientX
      var y1 = event.touches[0].clientY
      if (y1 >= rect.height + rect.top) {
        return
      }
      if (y1 <= 0) {
        return
      }
      document.getElementById('mmBlock').style.top = y1 + 'px'
      check(true)
    }

    mm.ontouchend = function (event) {
      console.log('event = ', event)
      var y2 = event.changedTouches[0].clientY
      console.log('当前下标2 = ', check(y2))
      alert(check(y2))
    }
  </script>
</body>
